<template>
<el-container>
    <el-header>
        <div class="navbar">
            <el-menu
            mode="horizontal"
            default-active="main"
            router
            >
                <el-menu-item
                index="main"
                >
                main
                </el-menu-item>
            </el-menu>
        </div>

        <div class="logo"><h1>LOGO</h1></div>
        <div class="nav-right">
            <div class="head-icon-wrap">
                <img src="" alt=""/>
            </div>
            <div class="button-group">
                <el-button icon="el-icon-cpu" size="mini"></el-button>
                <el-button icon="el-icon-cpu" size="mini"></el-button>
            </div>
        </div>
    </el-header>
    <el-main>
    <el-collapse v-if="teacherOpts && tkOpts">
        <el-collapse-item  v-for="item in subjectList" :title="item.subjectName" :key="item.subjectId">
            <el-card
             v-for="work in item.works"
             :key="work.tk_id"
            >
                题库：{{ choose("tk_id",tkOpts,work.tk_id,"tk_name") }}<br/>
                出题人：{{ choose("teac_id",teacherOpts,work.teac_id,"name") }}<br/>
                时间：{{ work.time }}<br/>
            <el-button :disabled="work.isDone" type="primary" size="mini" @click="goTest(work.tk_id)">去做题</el-button>
            </el-card>
        </el-collapse-item>
    </el-collapse>

    </el-main>
</el-container>
</template>

<script>
import request from "api"
import chose from "js/choose.js"

export default {
    name:"mainPage",
    data(){
        return {
            subjectList:[],
            tkOpts:[],
            teacherOpts:[],
        }
    },
    methods:{
        goTest(tkId){
            this.$router.push("/main/Tk/"+tkId)
        },
        getAllClassAndItTk(){
            return request({
                method:"get",
                url:'student/subject',
            }).then(res=>{
                this.subjectList = res.data.subjectList
                this.tkList = res.data.tkList
            })
        },
        getTeacherOpts(){
            return request({
                methods:"get",
                url:"/opt/teacher"
            }).then(res=>{
                this.teacherOpts = res.data
            })
        },
        getTkOpts(){
            return request({
                methods:"get",
                url:"/opt/TK"
            }).then(res=>{
                this.tkOpts = res.data
            })
        },
        choose(att,a,b,resAtt){
            return chose(att,a,b,resAtt)
        }
    },
    mounted(){
        this.getAllClassAndItTk()
        this.getTeacherOpts()
        this.getTkOpts()
    }
}
</script>

<style scoped>
.el-header{
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
    line-height: 100%;
}
.logo{
    float: left;}
.nav-right{
    float: right;
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
}
.nav-right > .head-icon-wrap{
    width: 32px;
    height: 32px;
    box-shadow: 0 0 8px #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    margin: 0 5px;
}
.nav-right > .button-group{
    margin: 0 5px;
}
.navbar{
    top:0;
    right: calc(100%/2 - 35px);
    position:absolute;
    width: 70px;
}
</style>